import React from 'react';
import './index.less';
import {Space, Popconfirm, Popover} from 'antd';

export default (props) => {
    const {operation = [], rowData, index} = props;

    const showBtns = operation.filter(item => {
        if (item.visible === false) {
            return false;
        }
        if (typeof item.visible === 'function') {
            return item.visible(rowData, index);
        }

        return true;
    });

    return (
        <div 
            className={`row-operation hr-table-row-operation`}
            // style={{
            //     display: showIndex === index ? 'block' : 'none'
            // }}
        >
            <Space>
                {showBtns.map((btnInfo, btnIndex) => {
                    if (btnInfo.tips) {
                        return (
                            <Popconfirm
                                title={btnInfo.tips}
                                disabled={!btnInfo.tips}
                                cancelText="取消"
                                okText="确认"
                                onConfirm={(e) => {
                                    typeof btnInfo.onClick === 'function' && btnInfo.onClick(rowData, index, e)
                                }}
                                key={btnIndex}
                                zIndex={2222}
                            >
                                <span 
                                    className={'row-btn'}
                                >
                                    {btnInfo.label}
                                </span>
                            </Popconfirm>
                        );
                    } else {
                        return (
                            <span 
                                className={'row-btn'}
                                key={btnIndex}
                                onClick={(e) => {
                                    typeof btnInfo.onClick === 'function' && btnInfo.onClick(rowData, index, e)
                                }}
                            >
                                {btnInfo.label}
                            </span>
                        );
                    }
                })}
            </Space>
        </div>
    );
}